<template>
  <div class="echarts-map-wrapper">
    <!-- 添加面包屑导航 -->
    <div class="map-breadcrumb" v-if="areaStack.length > 1">
      <a class="back-button" @click="backToParent">返回上级</a>
      <span class="breadcrumb-divider">|</span>
      <div class="breadcrumb-path">
        <template v-for="(area, index) in areaStack" :key="area.code">
          <span v-if="index > 0" class="breadcrumb-separator">/</span>
          <span 
            class="breadcrumb-item" 
            :class="{ 'is-current': index === areaStack.length - 1 }"
            @click="navigateToArea(index)"
          >{{ simplifyAreaName(area.name) }}</span>
        </template>
      </div>
    </div>
    <div ref="chartContainer" class="echarts-map-container"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, reactive, defineProps, defineEmits } from 'vue'
import * as echarts from 'echarts'
import { getMapData, formatProvinceName, getAreaLevel } from '@/utils/map-data'
// 引入API方法
import { getOrgMapStatistics } from '@/api/h3yun'

// 定义区域名称简化映射表
const areaNameSimplifyMap: Record<string, string> = {
  '香港特别行政区': '香港',
  '澳门特别行政区': '澳门',
  '宁夏回族自治区': '宁夏',
  '内蒙古自治区': '内蒙古',
  '广西壮族自治区': '广西',
  '新疆维吾尔自治区': '新疆',
  '西藏自治区': '西藏'
}

// 简化区域名称的函数
const simplifyAreaName = (name: string): string => {
  if (areaNameSimplifyMap[name]) {
    return areaNameSimplifyMap[name]
  }
  // 使用原有的格式化函数
  return formatProvinceName(name)
}

// 定义组件属性
const props = defineProps({
  // 要显示的地图区域级别：country-中国，province-省，city-市，district-区
  mapLevel: {
    type: String,
    default: 'country'
  },
  // 当前地图区域code
  areaCode: {
    type: String,
    default: '100000' // 中国
  },
  // 医院数据
  hospitalData: {
    type: Array,
    default: () => []
  }
})

// 定义事件
const emit = defineEmits(['update:mapLevel', 'update:areaCode', 'areaClick'])

// 图表容器引用
const chartContainer = ref<HTMLElement | null>(null)
// 图表实例
let chartInstance: echarts.ECharts | null = null
// 地图数据加载状态
const mapLoading = ref(true)
// 当前区域路径堆栈，用于返回上一级
const areaStack = reactive<{ name: string, code: string, level: string, properties: any }[]>([
  { name: '中国', code: '100000', level: 'country', properties: {} }
])
// 当前显示区域的下级区域列表
const subAreaList = ref<{ name: string, value: string | number, code: string, properties?: any }[]>([])
// 统计数据
const statisticsData = ref<Record<string, number>>({})

// 初始化图表
const initChart = async () => {
  if (!chartContainer.value) return
  
  // 创建图表实例，添加更多配置选项确保地图正确渲染
  chartInstance = echarts.init(chartContainer.value, null, {
    renderer: 'canvas',
    useDirtyRect: true,
    devicePixelRatio: window.devicePixelRatio
  })
  
  // 注册地图点击事件
  chartInstance.on('click', handleMapClick)
  
  // 加载中国地图
  await loadMapData()
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', resizeChart)
}

// 调整图表大小
const resizeChart = () => {
  if (!chartInstance) return
  chartInstance.resize({
    width: 'auto',
    height: 'auto',
    animation: {
      duration: 300
    }
  })
}

// 获取统计数据
const fetchStatisticsData = async (areaCode: string) => {
  try {
    areaCode = areaCode ? areaCode : '100000'
    const result = await getOrgMapStatistics(areaCode)
    if (result && result.code.toString() === '0' && result.data) {
      statisticsData.value = result.data
      console.log('获取到区域统计数据:', statisticsData.value)
    } else {
      console.error('获取区域统计数据失败:', result)
      statisticsData.value = {}
    }
  } catch (error) {
    console.error('调用统计数据接口出错:', error)
    statisticsData.value = {}
  }
}

// 加载地图数据
const loadMapData = async () => {
  try {
    mapLoading.value = true
    
    // 当前区域信息
    const currentArea = areaStack[areaStack.length - 1]
    
    // 先获取当前区域的统计数据
    await fetchStatisticsData(currentArea.code)
    
    // 如果已经是区县级别，发出切换组件的信号
    if (currentArea.level === 'district') {
      console.log('当前是区县级别，建议切换到 Map 组件')
      emit('update:mapLevel', 'district')
      emit('update:areaCode', currentArea.code)
      emit('areaClick', { 
        name: currentArea.name, 
        code: currentArea.code, 
        level: 'district',
        properties: currentArea.properties
      })
      mapLoading.value = false
      return
    }
    
    // 特殊处理 - 中国地图数据
    if (currentArea.level === 'country') {
      // 加载中国地图数据
      await loadChineseMap()
    } else {
      // 加载省/市/区地图数据
      // 这里需要根据行政区划代码加载对应的地图数据
      await loadAreaMap(currentArea.code)
    }
    
    mapLoading.value = false
  } catch (error) {
    console.error('加载地图数据失败:', error)
    mapLoading.value = false
  }
}

// 加载中国地图数据
const loadChineseMap = async () => {
  try {
    // 获取中国地图数据
    const mapData = await getMapData('100000')
    
    // 注册地图
    echarts.registerMap('china', mapData)
    
    // 使用地图数据中的实际省级信息，不再使用模拟数据
    const provinceData = extractSubAreasFromMapData(mapData, 'country')
    subAreaList.value = provinceData
    
    // 更新地图
    updateMap('china', provinceData)
  } catch (error) {
    console.error('加载中国地图数据失败:', error)
  }
}

// 加载省/市/区地图数据
const loadAreaMap = async (areaCode: string) => {
  try {
    console.log(`开始加载区域地图数据: ${areaCode}`)
    
    // 获取当前区域级别
    const level = getAreaLevel(areaCode)
    console.log(`当前区域级别: ${level}`)
    if (level === 'district') {
      console.log('已经是最低级别(区县)，不再下钻')
      return
    }
    
    // 获取对应区域地图数据
    const mapData = await getMapData(areaCode)
    
    // 注册地图
    echarts.registerMap(areaCode, mapData)
    
    // 从地图数据中提取子区域信息
    const subAreas = extractSubAreasFromMapData(mapData, level)
    
    subAreaList.value = subAreas
    
    console.log(`提取的子区域数据:`, subAreas)
    
    // 更新地图
    updateMap(areaCode, subAreas)
  } catch (error) {
    console.error(`加载区域(${areaCode})地图数据失败:`, error)
  }
}

// 从地图数据中提取子区域信息
const extractSubAreasFromMapData = (mapData: any, parentLevel: string): { name: string, value: string | number, code: string, properties: any }[] => {
  try {
    if (!mapData || !mapData.features || !Array.isArray(mapData.features)) {
      console.error('地图数据格式异常，无法提取子区域信息:', mapData)
      return []
    }
    
    // 确定子区域级别
    let childLevel = 'province'
    if (parentLevel === 'country') childLevel = 'province'
    else if (parentLevel === 'province') childLevel = 'city'
    else if (parentLevel === 'city') childLevel = 'district'
    
    // 从features中提取子区域信息
    const subAreas = mapData.features.map((feature: any) => {
      // 从properties中获取行政区划代码和名称
      const properties = feature.properties || {}
      const adcode = properties.adcode || properties.code || properties.id || ''
      const name = properties.name || ''
      
      // 从统计数据中获取值
      const value = statisticsData.value[adcode] || 0
      
      return {
        name,
        value,
        code: adcode.toString(),
        properties
      }
    }).filter((area: any) => area.code && area.name !== '未知区域')
    
    // 为了避免重复，使用Set去重
    const uniqueAreas = Array.from(new Map(subAreas.map(area => [area.code, area])).values()) as { name: string, value: string | number, code: string, properties: any }[]
    
    return uniqueAreas
  } catch (error) {
    console.error('提取子区域信息失败:', error)
    return []
  }
}

// 处理地图点击事件
const handleMapClick = (params: any) => {
  const { name } = params
  
  console.log('地图点击:', name, params)
  
  // 当前区域级别
  const currentArea = areaStack[areaStack.length - 1]
  const currentLevel = currentArea.level
  
  // 如果当前已经是区县级别，不做任何处理
  if (currentLevel === 'district') {
    console.log('已经是最低级别(区县)，不再下钻')
    return
  }
  
  // 获取下一级别
  const nextLevel = getNextAreaLevel(currentLevel)
  if (!nextLevel) return // 已经是最低级别
  
  // 查找点击的区域
  const clickedArea: any = findClickedArea(name, currentLevel, currentArea.code, currentArea.properties)
  if (!clickedArea) return // 无法找到匹配的区域
  
  console.log(`下钻: ${currentLevel} -> ${nextLevel}, 区域: ${clickedArea.name}, 代码: ${clickedArea.code}`)
  
  // 记录点击区域到堆栈
  areaStack.push({
    name: clickedArea.name,
    code: clickedArea.code,
    level: nextLevel,
    properties: clickedArea.properties
  })
  
  // 更新属性，通知父组件
  emit('update:mapLevel', nextLevel)
  emit('update:areaCode', clickedArea.code)
  emit('areaClick', { name: clickedArea.name, code: clickedArea.code, level: nextLevel, properties: clickedArea.properties })
  
  // 加载新区域地图
  loadMapData()
}

// 获取下一级地图区域级别
const getNextAreaLevel = (currentLevel: string): string | null => {
  const levelMap: Record<string, string> = {
    'country': 'province',
    'province': 'city',
    'city': 'district'
  }
  return levelMap[currentLevel] || null
}

// 查找点击的区域
const findClickedArea = (name: string, currentLevel: string, parentCode: string, properties: any): { name: string, value: string | number, code: string, properties: any } | null => {
  // 尝试各种匹配方式查找区域
  let clickedArea = findAreaByExactMatch(name)
      || findAreaBySimplifiedName(name)
      || findAreaByCleanName(name)
  
  // 如果找不到匹配项，创建新的区域对象
  if (!clickedArea) {
    clickedArea = createNewArea(name, currentLevel, parentCode, properties)
  }
  
  return clickedArea as { name: string, value: string | number, code: string, properties: any } | null
}

// 通过精确名称匹配区域
const findAreaByExactMatch = (name: string): { name: string, value: string | number, code: string, properties?: any } | undefined => {
  return subAreaList.value.find(item => item.name === name)
}

// 通过简化名称匹配区域
const findAreaBySimplifiedName = (name: string): { name: string, value: string | number, code: string, properties?: any } | undefined => {
  const simplifiedName = simplifyAreaName(name)
  console.log('尝试使用简化名称匹配:', simplifiedName)
  
  return subAreaList.value.find(item => {
    const itemName = item.name
    const itemSimplifiedName = simplifyAreaName(itemName)
    
    return itemName.includes(simplifiedName) || 
           simplifiedName.includes(itemName) ||
           itemSimplifiedName.includes(simplifiedName) || 
           simplifiedName.includes(itemSimplifiedName)
  })
}

// 通过清理后的名称匹配区域
const findAreaByCleanName = (name: string): { name: string, value: string | number, code: string, properties?: any } | undefined => {
  console.log('尝试更宽松的匹配:', name)
  
  // 移除"市"、"省"、"自治区"等后缀进行匹配
  const cleanName = name.replace(/(省|市|自治区|特别行政区|地区|盟|区|县)$/g, '')
  
  return subAreaList.value.find(item => {
    const cleanItemName = item.name.replace(/(省|市|自治区|特别行政区|地区|盟|区|县)$/g, '')
    return cleanName === cleanItemName || 
           cleanName.includes(cleanItemName) || 
           cleanItemName.includes(cleanName)
  })
}

// 创建新的区域对象
const createNewArea = (name: string, currentLevel: string, parentCode: string, properties: any): { name: string, value: string | number, code: string, properties: any } | null => {
  console.error('无法找到匹配的区域:', name)
  console.log('可用区域列表:', subAreaList.value.map(item => `${item.name}(${simplifyAreaName(item.name)})`))
  
  // 根据当前级别生成新的区域代码
  let newCode = generateAreaCode(currentLevel, parentCode)
  if (!newCode) return null
  
  // 从统计数据中获取值
  const value = statisticsData.value[newCode] || 0
  
  // 创建新的区域对象
  const newArea = {
    name,
    value,
    code: newCode,
    properties
  }
  
  // 添加到子区域列表
  subAreaList.value.push(newArea)
  return newArea
}

// 根据当前级别生成新的区域代码
const generateAreaCode = (currentLevel: string, parentCode: string): string | null => {
  const index = subAreaList.value.length + 1
  
  if (currentLevel === 'country') {
    // 生成省级代码
    return `${index + 10}0000`
  } else if (currentLevel === 'province') {
    // 生成市级代码，使用省级代码的前两位
    return `${parentCode.substring(0, 2)}${index.toString().padStart(2, '0')}00`
  } else if (currentLevel === 'city') {
    // 生成区县代码
    return generateDistrictCode(parentCode, index)
  }
  
  return null // 区级别是最低级别，不再生成
}

// 返回上一级地图
const backToParent = () => {
  // 如果已经是最顶层，不进行操作
  if (areaStack.length <= 1) return
  
  // 移除当前区域
  areaStack.pop()
  
  // 获取父级区域信息
  const parentArea = areaStack[areaStack.length - 1]
  
  // 更新属性，通知父组件
  emit('update:mapLevel', parentArea.level)
  emit('update:areaCode', parentArea.code)
  emit('areaClick', { 
    name: parentArea.name, 
    code: parentArea.code, 
    level: parentArea.level,
    properties: parentArea.properties
  })
  
  // 加载父级区域地图
  loadMapData()
}

// 获取当前区域堆栈
const getCurrentAreaStack = () => {
  return [...areaStack]
}

// 导航到指定层级
const navigateToArea = (index: number) => {
  // 如果点击当前区域，不做操作
  if (index === areaStack.length - 1) return
  
  // 如果点击的是第一级(中国)，直接清空所有堆栈只保留中国
  if (index === 0) {
    while (areaStack.length > 1) {
      areaStack.pop()
    }
  } else {
    // 否则，删除到指定层级之后的所有区域
    const targetLength = index + 1
    while (areaStack.length > targetLength) {
      areaStack.pop()
    }
  }
  
  // 获取当前层级区域
  const currentArea = areaStack[areaStack.length - 1]
  
  // 更新属性，通知父组件
  emit('update:mapLevel', currentArea.level)
  emit('update:areaCode', currentArea.code)
  emit('areaClick', { 
    name: currentArea.name, 
    code: currentArea.code, 
    level: currentArea.level,
    properties: currentArea.properties
  })
  
  // 加载区域地图
  loadMapData()
}

// 暴露方法给父组件
defineExpose({
  backToParent,
  getCurrentAreaStack,
  navigateToArea,
  handleMapClick
})

// 监听属性变化
watch(
  [() => props.mapLevel, () => props.areaCode],
  ([newLevel, newCode]) => {
    // 如果堆栈顶部已经是这个区域，不重复加载
    const currentArea = areaStack[areaStack.length - 1]
    if (currentArea.code === newCode && currentArea.level === newLevel) return
    
    // 清空区域堆栈，重新开始
    areaStack.splice(1) // 保留中国
    
    // 根据新的区域代码加载地图
    if (newLevel !== 'country') {
      // 添加到区域堆栈
      areaStack.push({
        name: '未知区域', // 实际使用时应从API获取区域名称
        code: newCode,
        level: newLevel,
        properties: {}
      })
    }
    
    // 加载地图数据
    loadMapData()
  },
  { immediate: true }
)

// 组件挂载后初始化图表
onMounted(() => {
  initChart()
})

// 组件销毁前清理资源
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', resizeChart)
})

// 生成区县代码
const generateDistrictCode = (cityCode: string, index: number) => {
  // 区县级编码规则: 市级编码前4位 + 区县编码(01-99)
  return `${cityCode.substring(0, 4)}${index.toString().padStart(2, '0')}`
}

// 更新地图
const updateMap = (mapName: string, data: any[]) => {
  if (!chartInstance) return

  console.log('更新地图数据:', data)
  
  // 当前区域名称
  const currentArea = areaStack[areaStack.length - 1]
  const currentLevel = currentArea.level // 当前地图级别
  
  // 确保数据的一致性，添加格式化后的名称
  const formattedData = data.map(item => {
    // 判断是否有统计数据 (value > 0)
    const hasValue = typeof item.value === 'number' && item.value > 0
    
    return {
      ...item,
      // 保留原始名称用于区域匹配
      originalName: item.name,
      // 添加格式化后的名称用于显示
      name: item.name, // 保持name字段不变，确保ECharts能正确识别地图区域
      // 格式化名称用于显示
      formattedName: simplifyAreaName(item.name),
      // 为有值的区域设置特殊样式
      itemStyle: hasValue ? {
        areaColor: 'rgba(255, 204, 0, 0.8)' // 黄色背景
      } : undefined,
      // 为有值的区域设置不同的文字样式
      label: hasValue ? {
        color: '#ffffff', // 白色文字
        rich: {
          valueStyle: {
            color: '#ffffff', // 白色文字
            fontWeight: 'bold'
          },
          nameStyle: {
            color: '#ffffff' // 白色文字
          }
        }
      } : undefined,
      // 标记是否有数据
      hasValue
    }
  })
  
  // 区县级别时增加边界高亮配置
  const emphasisItemStyle = {
    areaColor: currentLevel === 'district' ? '#0a94e2' : '#0a7be2',
    borderWidth: currentLevel === 'district' ? 2 : 1,
    borderColor: currentLevel === 'district' ? '#ffffff' : '#3498db',
    shadowBlur: currentLevel === 'district' ? 10 : 0,
    shadowColor: currentLevel === 'district' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0)'
  }
  
  const option: echarts.EChartsOption = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        const { name, value } = params
        
        // 判断是否有数据
        const hasValue = typeof value === 'number' && value > 0
        
        // 有数据的区域显示医院数量，没有数据的区域只显示名称
        return hasValue ? 
          `${simplifyAreaName(name)}<br/>医院数量: ${value || 0}` : 
          `${simplifyAreaName(name)}`
      }
    },
    // 移除visualMap控件
    series: [
      {
        name: '医院数量',
        type: 'map',
        map: mapName,
        roam: true,
        // 区县级别时缩放地图以便更好地查看
        zoom: currentLevel === 'country' ? 1.5 : currentLevel === 'district' ? 1.8 : 1.2,
        top: currentLevel === 'country' ? '28%' : currentLevel === 'district' ? '20%' : '10%',
        // 不同级别使用不同的中心点策略
        center: currentLevel === 'district' ? undefined : undefined,
        emphasis: {
          label: {
            show: true,
            color: '#fff',
            formatter: (params: any) => {
              // 判断是否有数据
              const hasValue = typeof params.value === 'number' && params.value > 0
              
              // 有数据的区域显示数字和名称，没有数据的区域只显示名称
              if (hasValue) {
                return [
                  '{valueStyle|' + (params.value || 0) + '}',
                  '{nameStyle|' + simplifyAreaName(params.name) + '}'
                ].join('\n')
              } else {
                return simplifyAreaName(params.name)
              }
            },
            rich: {
              valueStyle: {
                color: '#ffeb3b',
                fontSize: currentLevel === 'district' ? 14 : 16,
                fontWeight: 'bold',
                lineHeight: 24
              },
              nameStyle: {
                color: '#ffeb3b',
                fontSize: currentLevel === 'district' ? 12 : 14,
                lineHeight: 18
              }
            }
          },
          itemStyle: emphasisItemStyle // 使用条件样式
        },
        data: formattedData,
        // 设置地图样式 - 默认样式，各区域可以通过自身的itemStyle覆盖
        itemStyle: {
          areaColor: 'rgba(23, 68, 137, 1)', // 默认蓝色
          borderColor: '#3498db',
          borderWidth: 1
        },
        // 设置文本样式，区县级别时使用更小的字体
        label: {
          show: true,
          color: '#fff', // 默认白色，不再覆盖
          fontSize: currentLevel === 'district' ? 10 : 12,
          lineHeight: 16,
          // fontWeight: 'bold',
          formatter: (params: any) => {
            // 判断是否有数据
            const hasValue = typeof params.value === 'number' && params.value > 0
            
            // 有数据的区域显示数字和名称，没有数据的区域只显示名称
            if (hasValue) {
              return [
                '{valueStyle|' + (params.value || 0) + '}',
                '{nameStyle|' + simplifyAreaName(params.name) + '}'
              ].join('\n')
            } else {
              return simplifyAreaName(params.name)
            }
          },
          rich: {
            valueStyle: {
              color: '#ffeb3b', // 对于非特定区域的高亮状态保持原样
              fontSize: currentLevel === 'district' ? 12 : 14,
              fontWeight: 'bold',
              lineHeight: 20
            },
            nameStyle: {
              color: '#ffeb3b', // 对于非特定区域的高亮状态保持原样
              fontSize: currentLevel === 'district' ? 10 : 12,
              lineHeight: 16
            }
          }
        }
      }
    ]
  }
  
  chartInstance.setOption(option)
}
</script>

<style scoped lang="scss">
.echarts-map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.echarts-map-container {
  width: 100%;
  height: 100%;
  background-color: transparent;
  min-width: 400px;  /* 确保最小宽度 */
  min-height: 300px; /* 确保最小高度 */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.map-breadcrumb {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  max-width: 80%;
}

.back-button {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  user-select: none;
  transition: color 0.2s;
  
  &:hover {
    color: #3498db;
  }
}

.breadcrumb-divider {
  margin: 0 8px;
  color: #aaa;
}

.breadcrumb-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-item {
  padding: 2px 4px;
  cursor: pointer;
  white-space: nowrap;
  
  &:hover {
    color: #3498db;
  }
  
  &.is-current {
    color: #e74c3c;
    font-weight: bold;
    cursor: default;
    
    &:hover {
      color: #e74c3c;
    }
  }
}

.breadcrumb-separator {
  margin: 0 4px;
  color: #aaa;
}
</style> 